<template>
  <div>
    <span>标题:</span>
    <input
      type="text"
      class="title"
      placeholder="请输入代办标题"
      v-model="titleValue"
    />
    <span>日期:</span>
    <input type="date" class="date" v-model="dateValue" />
    <br />
    <button v-if="flag" @click="add">提交</button>
    <button v-else @click="submit">提交</button>
    <br />
    <button @click="reset">添加</button>
    <br />

    <table>
      <thead>
        <tr>
          <th>标题</th>
          <th>日期</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- // 根据上文的input输入框，这里的v-for循环应该是list -->
        <tr v-for="(item, index) in list" :key="index">
          <td>{{ item.titleValue }}</td>
          <td>{{ item.dateValue }}</td>
          <td>
            <button @click="edit(index)">编辑</button>
            <button @click="del(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "App",
  comments: {},
  data() {
    return {
      titleValue: "",
      dateValue: "",
      list: [],
      flag: true,
      index: 0,
    };
  },
  created() {
    // 获取本地存储中的list
    if (localStorage.getItem("list")) {
      this.list = JSON.parse(localStorage.getItem("list"));
    }
  },
  watch: {
    // 监听list的变化，当list发生变化时，将list存储到本地存储中
    list: {
      handler() {
        localStorage.setItem("list", JSON.stringify(this.list));
      },
      deep: true,
    },
  },
  methods: {
    // add() {
    //   // 判断是否有值
    //   if (!this.titleValue || !this.dateValue) {
    //     alert("请输入标题和日期");
    //     return;
    //   }
    //   // 判断是否是编辑
    //   if (
    //     this.list.some(
    //       (item) =>
    //         item.titleValue === this.titleValue &&
    //         item.dateValue === this.dateValue
    //     )
    //   ) {
    //     // 编辑
    //     console.log(1111);
    //     // 将表单的值替换item中的值
    //     this.list = this.list.forEach((item) => {
    //       item.dateValue = this.dateValue;
    //       item.titleValue = this.titleValue;
    //     });
    //     this.dateValue = "";
    //     this.titleValue = "";
    //   } else {
    //     // 添加
    //     console.log(222);
    //     this.list.push({
    //       titleValue: this.titleValue,
    //       dateValue: this.dateValue,
    //     });
    //     this.dateValue = "";
    //     this.titleValue = "";
    //   }
    // },
    add() {
      // 判断是否有值
      if (!this.titleValue || !this.dateValue) {
        alert("请输入标题和日期");
        return;
      }
      this.list.push({
        titleValue: this.titleValue,
        dateValue: this.dateValue,
      });
      this.dateValue = "";
      this.titleValue = "";
    },
    submit() {
      // 判断是否有值
      if (!this.titleValue || !this.dateValue) {
        alert("请输入标题和日期");
        return;
      }
      console.log(111);
      this.list[this.index].titleValue = this.titleValue;
      this.list[this.index].dateValue = this.dateValue;
      this.flag = true;
      this.dateValue = "";
      this.titleValue = "";
    },
    reset() {
      this.titleValue = "";
      this.dateValue = "";
    },
    del(index) {
      // 删除当前列表项
      // console.log(index, this.list);
      this.list.splice(index, 1);
    },
    edit(index) {
      // 回显数据
      // q:VUE3中怎么获取data中数组的值
      // a:使用解构赋值
      //
      const { titleValue, dateValue } = this.list[index];
      this.index = index;
      this.titleValue = titleValue;
      this.dateValue = dateValue;
      this.flag = false;
    },
  },
};
</script>

<style></style>
